<template>
  <div>
    <el-button icon="el-icon-search" @click="add">添加</el-button>
    <list ref="list" @changeInfo="changeInfo"></list>
    <info ref="info" @close="close" :info="infoData"></info>
  </div>
</template>

<script>
import list from "./list";
import info from "./info";
export default {
  data() {
    return {
      infoData: {
        openType: "add",
        dialogVisible: false
      },
    };
  },
  components: {
    list,
    info,
  },
  methods: {
    // 关闭弹窗
    close() {
      // 更新list组件中的数据
      this.$refs.list.getTableData();
      this.infoData.dialogVisible = false;
    },
    // 修改功能-给info.vue赋值
    changeInfo(data) {
      this.$refs.info.setStatus(data);
      this.infoData.openType = "edit";
      // 显示弹窗
      this.infoData.dialogVisible = true;
    },
    // 添加角色
    add() {
      this.$refs.info.setStatus({rolename: "",menus: [],status: 1});
      this.infoData.openType = "add";
      // 显示弹窗
      this.infoData.dialogVisible = true;
    },
  },
};
</script>

<style>
</style>